<template>
    <div class="content-box">
        <div class="center-box">

            <div class="content-left">
                <div class="left-tab">
                    学生中心
                </div>
                <div class="navigation-list">
                    <div class="navigation-item" v-for="(item, index) in routerList" :key="index">
                        <div @click="goToPage(item.routerName, index)" :class="{ 'skip-style': index === xz }">
                            <img :src="item.img">
                            <span>{{ item.title }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="content-right">
                <!-- 学生中心出口 -->
                <router-view></router-view>
            </div>
        </div>

    </div>
 

</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()

const routerList = ref([
    { routerName: "Student", title: "我的班级", img: '/src/assets/svg/school.svg' },
    { routerName: "StudentExam", title: "我的测试", img: '/src/assets/svg/experiment.svg' },
    { routerName: "Transcript", title: "我的成绩", img: '/src/assets/svg/transaction.svg' },
    { routerName: "MaterialDownload", title: "资料库", img: '/src/assets/svg/book-one.svg' },
    { routerName: "StudentChat", title: "在线答疑", img: '/src/assets/svg/thinking-problem.svg' },
    ])

//选中的标签
const xz = ref(null)
const goToPage = (routerName, index) => {
    console.log(routerName, index);
    router.push({ name: routerName })
    xz.value = index
}

</script>

<style scoped>
/* 最外层 */
.content-box {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

/* 中间 */
.center-box {
    width: 90%;
    height: 1000px;
    background-color: rgb(255, 255, 255);
    display: flex;

}
.skip-style {
    background-color: rgba(22, 244, 10, 0.1);
}
/* 左边导航 */
.content-left {
    border-radius: 10px;
    max-width: 250px;
    min-width: 250px;
    border-left: 2px rgba(0, 229, 255, 0.214) dotted;
}

/* 左边导航头 */
.left-tab {

    height: 50px;
    border-radius: 10px;
    background: linear-gradient(to right, rgb(165, 189, 181), rgba(117, 150, 123, 0.8));
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 左边导航每一条 */
.navigation-item div {
    cursor: pointer;
    padding: 10px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    /* background-color: rgba(145, 161, 154, 0.2); */
}

/* 左边导航 */
.navigation-item div:hover {
    background-color: rgb(127, 176, 164, 0.5);
}

/* 左边每一条导航的字体 */
.navigation-item div span {
    margin-left: 10px;
}



/* 右边内容 */
.content-right {
    width: 100%;
    border-radius: 10px;
    padding: 10px;
    margin-left: 20px;

}
</style>